<template>
    <div class="apply">
        <div class="apply_content">
            <div class="nav-view">首页 > 众创空间 > 镜像</div>
            <div class="apply_content_form">
                <div class="apply_content_form_left">
                    <div class="nav-item" v-for="(item, index) in navItem" :key="index" @click="changeNav(item, index)"
                        :class="{ 'selected': activeIndex === index }">
                        <div class="item-icon">
                            <div class="icon search"><el-icon>
                                    <Tickets />
                                </el-icon></div>
                        </div>
                        <div class="item-title" :class="{ 'selected': activeIndex === index }">{{ item }}
                        </div>
                    </div>
                </div>
                 
                <component :is="navTab"></component>
            </div>
        </div>
    </div>
</template>

<script setup>
import imageC from "./apply/image.vue";
import pluginUnit from "./apply/pluginUnit.vue";
import sourceCode from "./apply/sourceCode.vue";
import list from "./apply/list.vue";

const navItem = ref(['检索','镜像', '插件', '源码'])
const navTab = ref(list)

const activeIndex = ref(0); // 当前选中的导航项索引

// 侧边栏导航改变事件   
const changeNav = (item, index) => {
    activeIndex.value = index;
    switch (index) {
        case 0:
            navTab.value = list;
            break;
        case 1:
            navTab.value = imageC;
            break;
        case 2:
            navTab.value = pluginUnit;
            break;
        case 3:
            navTab.value = sourceCode;
            break;
        default:
            break;
    }
}
</script>

<style lang="scss" scoped>
.apply {
    width: 100%;
    min-height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;

    .nav-view {
        font-size: 14px;
        color: #333333;
        font-family: MicrosoftYaHei;
        height: 50px;
        display: flex;
        align-items: center;

    }

    .form-split-row {
        margin: 5px 0px;
        display: flex;
        align-items: center;
        align-content: flex-start;
        flex-wrap: wrap;

        .mark {
            width: 3px;
            height: 16px;
            background: #3AA1F4;
            margin: 0 5px 0 2px;
        }

        .title {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 17px;
            color: #333333;
            line-height: 26px;
        }

        .split {
            width: 100%;
            height: 2px;
            background: #EBEEF5;
            margin: 5px 0;
        }
    }

    .apply_content {
        width: 65%;
        height: 100%;
        padding: 1%;



        .apply_content_form {
            width: 100%;
            height: 100%;
            display: flex;
            background-color: #fff;

            .apply_content_form_left {
                width: 20%;
                min-height: 700px;
                display: flex;
                justify-content: center;
                align-content: flex-start;
                flex-wrap: wrap;
                padding-top: 20px;

                .nav-item {
                    border-radius: 4px;
                    width: 176px;
                    height: 54px;
                    background-color: #ffffff;
                    box-shadow: 1px 1px 6px 0 rgba(173, 173, 173, 0.45);
                    margin-bottom: 10px;
                    text-align: center;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .nav-item:hover {
                    border: 1px #3AA1F4 solid;
                }

                .item-icon {
                    margin-right: 15px;
                    margin-top: 6px;
                }

                .item-title {
                    font-size: 16px;
                    color: #333333;
                    font-family: MicrosoftYaHei;
                    font-weight: normal;
                }
            }

            .apply_content_form_right {
                width: 80%;
                height: 100%;

                .form-container {
                    width: 80%;
                    height: 100%;
                    margin: 70px auto;
                }

                .section {
                    width: 100%;
                    margin-bottom: 30px;
                }
            }
        }




    }

    .selected {
        background-image: linear-gradient(125deg, #0080E7 100%, #3DA3F5 100%);
        color: #fff !important;
    }
}
</style>